<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MyStack.Models.StoryView>>" %>

<asp:Content ID="Content4" ContentPlaceHolderID="HeadContentExplore" runat="server">
    <style type="text/css">
        /* style for the #1 item */#item1
        {
        	min-height:200px;
        	/*padding:10px;*/
            font-size: 1.5em;
            /*border: solid thin #7a7368;*/
            background-color:#e2e3cf; /* Darker Beige Border*/
            /*margin-bottom: 1em;*/
            border:none;
        }
        #item1 a
        {
            color: #EA7100; /* Blue links */
        }
        .exploreAvatar
        {
            float: left; /*border: solid 1px Black;*/
            background-color: Black;
            height: 50px;
            width: 50px;
        }
        .exploreAvatar a
        {
            border: none;
        }
        .exploreContent
        {
            margin-left: 50px;
            min-height: 50px; /*background-color:Black;*/
            color: #848a73;
            padding-left: 10px;
            font-size: 1.5em;
        }
        .exploreContent2
        {
        	margin-left: 210px;
            color: #7D5333;
        }
        .exploreContent2 a
        {
        	font-weight: bolder;
        }
        .exploreContent a
        {
            font-weight: bold;
        }
        .explorePadding
        {
            border-bottom: solid 1px #decba0; /* Darker Beige Border*/
            padding: 5px 0 5px 0;
        }
        #exploreTitle
        {
            padding-bottom: 10px;
            padding-top: 20px;
        }
        #exploreTitle a
        {
            color: #7a7368; /* Dark Grey Title color */
            font-weight: bolder;
            font-size: 1.5em;
        }
        #exploreBox
        {
            overflow: auto;
            height: 550px;
            /*border-top: solid 2px #7a7368;*/
            padding-left: 1em;
            padding-right: 1em;
            clear: both;
        }
        #Popular
        {
            /*padding: 10px 0 10px 0;*/
        }
        #Popular a
        {
            font-weight: bold;
            font-size: 1.5em;
            color: #75bce7;
        }
        #authorBox
        {
        	font-size:0.6em;
        	padding-top: 2px;
        }
        #title
        {
        	font-size: 2.2em;
            font-weight: 900;
        }
    </style>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Popular
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="pageTitleArea">
        <div id="exploreBoxTitle">
            Most Popular Stories</div>
        <div id="pushSuggestionText">
            Want to add something? Why not
            <%= Html.ActionLink("Push", "Push", "Stack") %>
            a new story onto your stack!</div>
    </div>
    <div id="popularList" style="clear: both; ">
        <% int count = 1; %>
        <% foreach (var item in Model)
           {%>
        <% if (item.Count > 0)
           {%>
        <div class="explorePadding" id="item<%= count%>" <%if (count == 1) {%> style="padding:0px;"<%} %>>
            <%if (count == 1)
              {%>
              <div class="exploreAvatar" style="height:200px;width:200px;">                      
              <%}
              else
              {%> 
              <div class="clear"></div>
              <div class="exploreAvatar">
              <%}%>            
                <a href="/Stack/Current/<%= item.AuthorId%>">
                    <img alt="avatar" onload="imageResize(<%= count == 1?"200":"50" %>, 'actingUser<%=count%>');" title="View <%= item.Author.Trim()%>'s stack"
                        id="actingUser<%=count%>" src='<%= Url.Action("Show", "Image", new { id=item.AuthorId }) %>' />
                </a>
            </div>          
            <%if (count == 1) {%> 
                <div class="exploreContent2"> 
                    <span id="title"><%= Html.ActionLink(item.Title, "Pop", "Stack", new { storyid = item.StoryId }, new object())%> 
                    </span>
                    <br /> 
                    <span style="padding:7px">
                    <%= Html.Encode("myStack Rank: " + count.ToString() + " ")%>
                    </span>
                    <br />
                    <div style="font-size:0.5em;padding-left:10px;">
                    <%= Html.Encode(" by ")%>
                    <%= Html.ActionLink(item.Author, "Current", "Stack", new { id = item.AuthorId }, null)%>
                    
                    
                    <%= Html.Encode(" read " + item.Count + " times")%>
                    </div>
                </div>            
            <%} else {%> <div class="exploreContent">
                <%= Html.ActionLink(item.Title, "Pop", "Stack", new { storyid = item.StoryId }, new object())%>
                <div id="authorBox">
                <%= Html.Encode(" by ")%>
                <%= Html.ActionLink(item.Author, "Current", "Stack", new { id = item.AuthorId }, null)%>

                <%= Html.Encode(" read " + item.Count + " times")%><br />           
                <%= Html.Encode("myStack Rank: " + count.ToString() + " ")%>
                </div>
            <%}%>                 
            </div>
        </div>
        <%--        <div class="popularListItem" style="border: solid thin black; display: block;" id="item<%= count%>">
            <div id="countDiv" style="float: left;">
                </div>
            <div id="exploreAvatar" style="">
                <a href="/Stack/Current/<%= item.AuthorId %>">
                    <img alt="avatar" onload="imageResize(50, 'author<%=count%>');" id="author<%=count%>"
                        src='<%= Url.Action("Show", "Image", new { id=item.AuthorId }) %>' title="View <%= item.Author.Trim()%>'s stack" />
                </a>
            </div>
            <div id="popularDescription" style="clear: none;">
                <%= Html.ActionLink(item.Title, "Pop", "Stack", new { storyid = item.StoryId }, new object())%>
                <%= Html.Encode(" by ")%>
                <%= Html.ActionLink(item.Author, "Current", "Stack", new { id = item.AuthorId }, null)%>
                <% if (count == 1)
                   { %><br />
                <%} %>
                <%= Html.Encode(" read " + item.Count + " times")%><br />
            </div>
        </div>--%>
        <%} %>
        <% count++; %>
        <%} %>
    </div>    
</asp:Content>
